<template>
  <div class="common-layout">
    <el-container>
      <el-aside
        class="aside animate"
        :style="[
          'background-color:' + theme.asideBg,
          'color:' + theme.asideText,
          isCollapse ? 'width:64px;' : 'width:200px;'
        ]"
      >
        <Aside :isCollapse="isCollapse"></Aside>
      </el-aside>
      <el-container>
        <el-header
          :style="[
            'border-bottom: 1px solid #eee;',
            'background-color:' + theme.headerBg,
            'color:' + theme.headerText + '!important'
          ]"
        >
          <Header @wider="toggle" :isCollapse="isCollapse"></Header>
        </el-header>
        <Tabs />
        <el-main style="height: calc(100vh - 100px)">
          <Main />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
  import Tabs from './Manage/Tabs.vue'
  import Header from './Manage/Header.vue'
  import Aside from './Manage/Aside.vue'
  import Main from './Manage/Main.vue'
  import { ref, computed } from 'vue'
  import { useUserStore } from '@/stores/user'

  const userStore = useUserStore()
  const theme = computed(() => {
    return userStore.theme
  })
  const isCollapse = ref(false)
  const toggle = () => {
    isCollapse.value = !isCollapse.value
  }
  // 监测窗口宽度，低于 768px 时，侧边栏自动折叠
  if (window.innerWidth < 768) {
    isCollapse.value = true
  }
</script>

<style scoped>
  .common-layout {
    height: 100vh;
    overflow: hidden;
  }
  .aside {
    box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
  }

  .animate {
    transition: all var(--el-transition-duration);
  }
</style>
